package com.dji.compose_learning.ui.view

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.rememberTransformableState
import androidx.compose.foundation.gestures.transformable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun MultiTouchPage() {
    Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.surface) {
        Box(contentAlignment = Alignment.Center) {
            TouchBox()
        }
    }
}

@Composable
fun TouchBox() {
    var scale by remember { //缩放
        mutableStateOf(1f)
    }
    var rotation by remember { //旋转
        mutableStateOf(0f)
    }
    var offset by remember { //平移
        mutableStateOf(Offset.Zero)
    }

    val state = rememberTransformableState { zoomChange, panChange, rotationChange ->
        scale *= zoomChange
        rotation += rotationChange
        offset += panChange
    }

    Box(modifier = Modifier
        .graphicsLayer {
            scaleX = scale
            scaleY = scale
            rotationZ = rotation
            translationX = offset.x
            translationY = offset.y
        }
        .transformable(state = state)
        .size(100.dp)
        .background(Color.Yellow), contentAlignment = Alignment.Center) {
        Text(text = "Hello", fontSize = 20.sp, color = MaterialTheme.colorScheme.onSurface)
    }
}





















